<div class="query-wrapper">
  <div class="form-inline" #myQuery="ngForm" ngForm >
    <div class="form-group">
      <label>数据类型：</label>
      <select class="form-control" style="border-radius: 4px;" [(ngModel)]="type" name="datatype">
          <option *ngFor="let select of selects" [value]="select.value">
              {{select.name}}
          </option>
      </select>
    </div>
    <app-time-type [begindate]="begindate"  (emitDate)="getDate($event)" [hasEnd]="false"></app-time-type>
    <div class="form-group">
      <button class="btn btn-primary btn-sm" [disabled]="!begindate" (click)="condition(myQuery.value)"><i class="fa fa-search" aria-hidden="true"></i>&nbsp;&nbsp;查询</button>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <echarts-ng2 #echarts  [theme]="'macarons'"></echarts-ng2>
    </div>
  </div>
</div>
<div class="container table-striped-wrapper">
  <div class="row table-title">
    <div class="col-sm-1"></div>
    <div class="col-sm-3">
      用户：{{deviceInfo.name}}
    </div>
    <div class="col-sm-2">
    </div>
    <div class="col-sm-3">
    </div>
    <div class="col-sm-2">
        <button class="btn btn-primary btn-sm"><i class="fa fa-external-link" aria-hidden="true"></i>&nbsp;&nbsp;导出Excel</button>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th colspan="3" rowspan="2">日期</th>
            <th colspan="13">曲线电量(kWh)</th>
          </tr>
          <tr>
            <th *ngFor="let time of times">{{time}}</th>
          </tr> 
        </thead>
        <tbody>
          <tr>
            <td rowspan="4">{{listData.time | date:'yyyy-MM-dd'}}</td>
            <td rowspan="2">正向有功</td>
            <td>AM</td>
            <td *ngFor="let item of listData.positiveActive.AM">{{item}}</td>
          </tr>
          <tr>
            <td>PM</td>
            <td *ngFor="let item of listData.positiveActive.PM">{{item}}</td>
          </tr>
          <tr>
            <td rowspan="2">正向无功</td>
            <td>AM</td>
            <td *ngFor="let item of listData.positiveReactive.AM">{{item}}</td>
          </tr>
          <tr>
            <td>PM</td>
            <td *ngFor="let item of listData.positiveReactive.PM">{{item}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>